/**
 * UI 相关常量定义
 * @description 定义主题颜色、组件尺寸、间距和响应式断点等 UI 常量
 */

/**
 * 主题颜色常量
 * @description 定义应用的主题色彩系统
 */
export const THEME_COLORS = {
  /** 主色调 */
  PRIMARY: {
    /** 主色 */
    DEFAULT: '#1890ff',
    /** 浅色 */
    LIGHT: '#40a9ff',
    /** 深色 */
    DARK: '#096dd9',
    /** 超浅色 */
    LIGHTER: '#69c0ff',
    /** 超深色 */
    DARKER: '#0050b3'
  },
  /** 辅助色 */
  SECONDARY: {
    /** 辅助色 */
    DEFAULT: '#722ed1',
    /** 浅色 */
    LIGHT: '#9254de',
    /** 深色 */
    DARK: '#531dab'
  },
  /** 成功色 */
  SUCCESS: {
    /** 成功色 */
    DEFAULT: '#52c41a',
    /** 浅色 */
    LIGHT: '#73d13d',
    /** 深色 */
    DARK: '#389e0d'
  },
  /** 警告色 */
  WARNING: {
    /** 警告色 */
    DEFAULT: '#faad14',
    /** 浅色 */
    LIGHT: '#ffc53d',
    /** 深色 */
    DARK: '#d48806'
  },
  /** 错误色 */
  ERROR: {
    /** 错误色 */
    DEFAULT: '#ff4d4f',
    /** 浅色 */
    LIGHT: '#ff7875',
    /** 深色 */
    DARK: '#cf1322'
  },
  /** 信息色 */
  INFO: {
    /** 信息色 */
    DEFAULT: '#1890ff',
    /** 浅色 */
    LIGHT: '#40a9ff',
    /** 深色 */
    DARK: '#096dd9'
  },
  /** 中性色 */
  NEUTRAL: {
    /** 白色 */
    WHITE: '#ffffff',
    /** 黑色 */
    BLACK: '#000000',
    /** 浅灰 */
    GRAY_100: '#f5f5f5',
    /** 灰色 */
    GRAY_200: '#f0f0f0',
    /** 中灰 */
    GRAY_300: '#d9d9d9',
    /** 深灰 */
    GRAY_400: '#bfbfbf',
    /** 更深灰 */
    GRAY_500: '#8c8c8c',
    /** 深色灰 */
    GRAY_600: '#595959',
    /** 超深灰 */
    GRAY_700: '#434343',
    /** 极深灰 */
    GRAY_800: '#262626',
    /** 最深灰 */
    GRAY_900: '#1f1f1f'
  }
} as const;

/**
 * 课程颜色预设
 * @description 预定义的课程颜色选项
 */
export const COURSE_COLORS = [
  '#1890ff', // 蓝色
  '#52c41a', // 绿色
  '#faad14', // 橙色
  '#ff4d4f', // 红色
  '#722ed1', // 紫色
  '#13c2c2', // 青色
  '#eb2f96', // 品红
  '#f5222d', // 朱红
  '#fa541c', // 火红
  '#fa8c16', // 金橙
  '#a0d911', // 青绿
  '#52c41a', // 绿色
  '#13c2c2', // 青色
  '#1890ff', // 蓝色
  '#2f54eb', // 极光蓝
  '#722ed1', // 紫色
  '#eb2f96', // 品红
  '#f5222d'  // 朱红
] as const;

/**
 * 组件尺寸常量
 * @description 定义组件的标准尺寸
 */
export const COMPONENT_SIZES = {
  /** 按钮尺寸 */
  BUTTON: {
    /** 小号 */
    SMALL: {
      height: 24,
      padding: '0 7px',
      fontSize: 12
    },
    /** 中号（默认） */
    MIDDLE: {
      height: 32,
      padding: '0 15px',
      fontSize: 14
    },
    /** 大号 */
    LARGE: {
      height: 40,
      padding: '0 15px',
      fontSize: 16
    }
  },
  /** 输入框尺寸 */
  INPUT: {
    /** 小号 */
    SMALL: {
      height: 24,
      padding: '0 7px',
      fontSize: 12
    },
    /** 中号（默认） */
    MIDDLE: {
      height: 32,
      padding: '0 11px',
      fontSize: 14
    },
    /** 大号 */
    LARGE: {
      height: 40,
      padding: '0 11px',
      fontSize: 16
    }
  },
  /** 卡片尺寸 */
  CARD: {
    /** 小号 */
    SMALL: {
      padding: 12,
      borderRadius: 4
    },
    /** 默认 */
    DEFAULT: {
      padding: 16,
      borderRadius: 6
    },
    /** 大号 */
    LARGE: {
      padding: 24,
      borderRadius: 8
    }
  }
} as const;

/**
 * 间距常量
 * @description 定义标准的间距值
 */
export const SPACING = {
  /** 超小间距 */
  XS: 4,
  /** 小间距 */
  SM: 8,
  /** 中间距 */
  MD: 16,
  /** 大间距 */
  LG: 24,
  /** 超大间距 */
  XL: 32,
  /** 极大间距 */
  XXL: 48,
  /** 巨大间距 */
  XXXL: 64
} as const;

/**
 * 响应式断点常量
 * @description 定义响应式设计的断点
 */
export const BREAKPOINTS = {
  /** 超小屏幕（手机） */
  XS: 480,
  /** 小屏幕（平板竖屏） */
  SM: 576,
  /** 中等屏幕（平板横屏） */
  MD: 768,
  /** 大屏幕（桌面） */
  LG: 992,
  /** 超大屏幕（大桌面） */
  XL: 1200,
  /** 极大屏幕（超大桌面） */
  XXL: 1600
} as const;

/**
 * 媒体查询常量
 * @description 预定义的媒体查询字符串
 */
export const MEDIA_QUERIES = {
  /** 移动端 */
  MOBILE: `(max-width: ${BREAKPOINTS.SM - 1}px)`,
  /** 平板端 */
  TABLET: `(min-width: ${BREAKPOINTS.SM}px) and (max-width: ${BREAKPOINTS.LG - 1}px)`,
  /** 桌面端 */
  DESKTOP: `(min-width: ${BREAKPOINTS.LG}px)`,
  /** 小屏设备 */
  SMALL_DEVICE: `(max-width: ${BREAKPOINTS.MD - 1}px)`,
  /** 大屏设备 */
  LARGE_DEVICE: `(min-width: ${BREAKPOINTS.LG}px)`,
  /** 高分辨率屏幕 */
  HIGH_DPI: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
} as const;

/**
 * 布局常量
 * @description 定义布局相关的常量
 */
export const LAYOUT = {
  /** 头部高度 */
  HEADER_HEIGHT: 64,
  /** 侧边栏宽度 */
  SIDEBAR_WIDTH: 256,
  /** 侧边栏折叠宽度 */
  SIDEBAR_COLLAPSED_WIDTH: 80,
  /** 底部高度 */
  FOOTER_HEIGHT: 48,
  /** 内容区域最小高度 */
  CONTENT_MIN_HEIGHT: 400,
  /** 最大内容宽度 */
  MAX_CONTENT_WIDTH: 1200,
  /** 页面内边距 */
  PAGE_PADDING: 24,
  /** 移动端页面内边距 */
  MOBILE_PAGE_PADDING: 16
} as const;

/**
 * 动画常量
 * @description 定义动画相关的常量
 */
export const ANIMATION = {
  /** 动画持续时间 */
  DURATION: {
    /** 快速 */
    FAST: 150,
    /** 正常 */
    NORMAL: 300,
    /** 慢速 */
    SLOW: 500
  },
  /** 缓动函数 */
  EASING: {
    /** 线性 */
    LINEAR: 'linear',
    /** 缓入 */
    EASE_IN: 'ease-in',
    /** 缓出 */
    EASE_OUT: 'ease-out',
    /** 缓入缓出 */
    EASE_IN_OUT: 'ease-in-out',
    /** 自定义缓动 */
    CUSTOM: 'cubic-bezier(0.4, 0, 0.2, 1)'
  },
  /** 过渡属性 */
  TRANSITION: {
    /** 全部属性 */
    ALL: 'all 0.3s ease-in-out',
    /** 颜色 */
    COLOR: 'color 0.3s ease-in-out',
    /** 背景色 */
    BACKGROUND: 'background-color 0.3s ease-in-out',
    /** 边框 */
    BORDER: 'border-color 0.3s ease-in-out',
    /** 阴影 */
    SHADOW: 'box-shadow 0.3s ease-in-out',
    /** 变换 */
    TRANSFORM: 'transform 0.3s ease-in-out',
    /** 透明度 */
    OPACITY: 'opacity 0.3s ease-in-out'
  }
} as const;

/**
 * 阴影常量
 * @description 定义标准的阴影样式
 */
export const SHADOWS = {
  /** 无阴影 */
  NONE: 'none',
  /** 小阴影 */
  SMALL: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
  /** 中等阴影 */
  MEDIUM: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)',
  /** 大阴影 */
  LARGE: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)',
  /** 超大阴影 */
  XLARGE: '0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)',
  /** 内阴影 */
  INSET: 'inset 0 1px 3px rgba(0, 0, 0, 0.12)'
} as const;

/**
 * 边框常量
 * @description 定义标准的边框样式
 */
export const BORDERS = {
  /** 无边框 */
  NONE: 'none',
  /** 细边框 */
  THIN: '1px solid #d9d9d9',
  /** 中等边框 */
  MEDIUM: '2px solid #d9d9d9',
  /** 粗边框 */
  THICK: '3px solid #d9d9d9',
  /** 虚线边框 */
  DASHED: '1px dashed #d9d9d9',
  /** 点线边框 */
  DOTTED: '1px dotted #d9d9d9'
} as const;

/**
 * 圆角常量
 * @description 定义标准的圆角值
 */
export const BORDER_RADIUS = {
  /** 无圆角 */
  NONE: 0,
  /** 小圆角 */
  SMALL: 2,
  /** 中等圆角 */
  MEDIUM: 4,
  /** 大圆角 */
  LARGE: 6,
  /** 超大圆角 */
  XLARGE: 8,
  /** 圆形 */
  CIRCLE: '50%',
  /** 胶囊形 */
  PILL: 9999
} as const;

/**
 * 字体常量
 * @description 定义字体相关的常量
 */
export const TYPOGRAPHY = {
  /** 字体族 */
  FONT_FAMILY: {
    /** 默认字体 */
    DEFAULT: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
    /** 等宽字体 */
    MONOSPACE: 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace'
  },
  /** 字体大小 */
  FONT_SIZE: {
    /** 超小 */
    XS: 10,
    /** 小 */
    SM: 12,
    /** 默认 */
    BASE: 14,
    /** 大 */
    LG: 16,
    /** 超大 */
    XL: 18,
    /** 2倍大 */
    XXL: 20,
    /** 3倍大 */
    XXXL: 24,
    /** 4倍大 */
    XXXXL: 30,
    /** 5倍大 */
    XXXXXL: 36
  },
  /** 字体粗细 */
  FONT_WEIGHT: {
    /** 细体 */
    THIN: 100,
    /** 超细体 */
    EXTRA_LIGHT: 200,
    /** 细体 */
    LIGHT: 300,
    /** 正常 */
    NORMAL: 400,
    /** 中等 */
    MEDIUM: 500,
    /** 半粗体 */
    SEMI_BOLD: 600,
    /** 粗体 */
    BOLD: 700,
    /** 超粗体 */
    EXTRA_BOLD: 800,
    /** 黑体 */
    BLACK: 900
  },
  /** 行高 */
  LINE_HEIGHT: {
    /** 紧密 */
    TIGHT: 1.2,
    /** 正常 */
    NORMAL: 1.5,
    /** 宽松 */
    LOOSE: 1.8
  }
} as const;

/**
 * Z-Index 层级常量
 * @description 定义组件的层级关系
 */
export const Z_INDEX = {
  /** 基础层 */
  BASE: 0,
  /** 下拉菜单 */
  DROPDOWN: 1000,
  /** 固定元素 */
  STICKY: 1020,
  /** 固定头部 */
  FIXED_HEADER: 1030,
  /** 侧边栏 */
  SIDEBAR: 1040,
  /** 模态框背景 */
  MODAL_BACKDROP: 1050,
  /** 模态框 */
  MODAL: 1060,
  /** 弹出框 */
  POPOVER: 1070,
  /** 工具提示 */
  TOOLTIP: 1080,
  /** 通知 */
  NOTIFICATION: 1090,
  /** 最高层 */
  MAX: 2147483647
} as const;

/**
 * 图标尺寸常量
 * @description 定义标准的图标尺寸
 */
export const ICON_SIZES = {
  /** 超小 */
  XS: 12,
  /** 小 */
  SM: 14,
  /** 中等 */
  MD: 16,
  /** 大 */
  LG: 20,
  /** 超大 */
  XL: 24,
  /** 极大 */
  XXL: 32
} as const;

/**
 * UI 状态常量
 * @description 定义 UI 组件的状态
 */
export const UI_STATES = {
  /** 默认状态 */
  DEFAULT: 'default',
  /** 悬停状态 */
  HOVER: 'hover',
  /** 激活状态 */
  ACTIVE: 'active',
  /** 聚焦状态 */
  FOCUS: 'focus',
  /** 禁用状态 */
  DISABLED: 'disabled',
  /** 加载状态 */
  LOADING: 'loading',
  /** 成功状态 */
  SUCCESS: 'success',
  /** 警告状态 */
  WARNING: 'warning',
  /** 错误状态 */
  ERROR: 'error'
} as const;